<template>
  <div class="box1">
    <div class="item1">
      <div class="top">
        订单详情
        <span v-if="order[0]">
          <el-button style="margin-left: 80%; margin-top: -10px;" v-if="order[0].status === 0" @click="cancelOrder">
            取消订单</el-button>
        </span>
        <span v-if="order[0]">
          <el-button style="margin-left: 80%; margin-top: -10px;" v-if="order[0].status === 1" @click="cancelOrder">
            退款</el-button>
        </span>
        <span v-if="order[0]">
          <el-button style="margin-left: 80%; margin-top: -10px;" v-if="order[0].status === 2" @click="cancelOrder">
            申请退款</el-button>
        </span>
      </div>
      <div style="padding-top: 30px;padding-bottom: 30px; font-size: 14px;" v-if="order[0]">
        <div>
          <span class="title" align="center">酒店: {{ order[0].hotelName }}</span>
          <span class="title" align="center">地址: {{ order[0].addr }}</span>
          <span class="title" align="center">房间类型: {{ order[0].roomName }}</span>
          <span class="title" align="center">时间: {{ time }}</span>
        </div>
        <div style="padding-top: 30px;">
          <span class="title" align="center">价格: {{ order[0].roomPrice }}</span>
          <span class="title" align="center">订单状态: {{ status }}</span>
        </div>

      </div>
    </div>
    <div style="margin-top: 20px;margin-left: 20px; font-size: 18px;" v-if="order[0]">
      金额合计：
      <span style="margin-right: 30px; color: rgb(255,0,0);">
        {{ order[0].pirce }}
      </span>
    </div>
  </div>
</template>
<script>
import { _getOrderById } from '../../api/user';
import { _cancelOrder } from '../../api/user';
export default {
  name: 'look-order',
  data() {
    return {
      orderId: '',
      order: [],
      time: '',
      status: '',
    }
  },
  methods: {
    getOrder() {
      _getOrderById(this.orderId).then((res) => {
        this.order = res.data
        // console.log(this.order)
      })
    },
    cancelOrder() {
      var order = {
        status: this.order[0].status,
        orderId: this.order[0].orderId
      }
      _cancelOrder(order).then((res) => {
        console.log(res)
        _getOrderById(this.orderId).then((res) => {
          this.order = res.data
          // console.log(this.order)
        })
      })

    },
    //根据状态值返回状态
    statusDescription() {
      switch (this.order[0].status) {
        case 0: return "未支付"
        case 1: return "已支付"
        case 2: return "交易完成"
        case 3: return "订单取消"
        case 4: return "已退款"
        case 5: return "申请退款"
        case 6: return "订单完成"
      }
    },
    padDate(value) {
      return value < 10 ? '0' + value : value
    },
    DateFormat(value) {
      // 根据给定的字符串，得到特定的日期
      var date = new Date(value);
      var year = date.getFullYear();
      var month = this.padDate(date.getMonth() + 1);
      var day = this.padDate(date.getDate());
      var hour = this.padDate(date.getHours());
      var min = this.padDate(date.getMinutes());
      var sec = this.padDate(date.getSeconds());
      return `${year}-${month}-${day} ${hour}:${min}:${sec}`;
    }
  },

  watch: {
    order() {
      this.status = this.statusDescription()
      // console.log(this.order[0])
      this.time = this.DateFormat(this.order[0].createTime)
      // console.log('-------')
      // console.log(this.time)
    }
  },
  computed: {
    // status: function () {
    //   return this.statusDescription()
    // }
    // time:function(){ 
    //   return this.DateFormat(this.order[0].createTime)
    // },
  },
  created() {
    // this.orderId = this.$route.query.orderId
    // _getOrderById(this.orderId).then((res)=>{
    //   this.order = res.data
    //   console.log(this.order[0])
    // })
  },
  mounted() {
    this.orderId = this.$route.query.orderId
    _getOrderById(this.orderId).then((res) => {
      this.order = res.data
      // console.log(this.order)
    })
  },
  updated() {

  },

}
</script>

<style  scoped >
.title {
  color: rgb(102, 102, 102);
  margin-left: 30px;
  margin-right: 30px;
  padding-left: 30px;
}

.box {
  height: 87vh;
  margin-left: 5%;
  margin-right: 5%;
  padding-right: 50px;
}

.box1 {
  height: 87vh;
  margin-left: 2%;
  margin-right: 2%;

  padding-right: 50px;
}

.top {
  height: 35px;
  background-color: rgb(243, 243, 243);
  line-height: 50xp;
  font-size: 14px;
  padding-top: 15px;
  padding-left: 15px;
}

.item1 {
  border: 1px solid rgb(228, 228, 228);
  margin-top: 10px;
}

.demo-form-inline {
  padding-top: 20px;
  padding-left: 20px;
}

.button1 {
  color: rgb(26, 188, 156);
  height: 20px;
  cursor: pointer
}

.button1:hover {
  border-bottom: 1px solid rgb(26, 188, 156);
}
</style>